<div class="alert alert-info alert-fn-valid" style="line-height:26px;" >
    <strong>提示！</strong>您可以在这里上传你的头像 ：）
    <p>
        Only the following format can be uploaded:
        <strong>.jpg, .jpge, .png</strong>
    </p>
</div>

<div id="preview-pane" class="preview-pane">
    <div class="preview-container">
        <img src="/images/no-image.gif" class="jcrop-preview" alt="Preview" />
    </div>
</div>
<div style="margin:3px 15px; font-size:11px;">60 x 60</div>
<div id="preview-pane-big" class="preview-pane-big">
    <div class="preview-container-big">
        <img src="/images/no-image.gif" class="jcrop-preview" alt="Preview" />
    </div>
</div>
<div style="margin:3px 25px; font-size:11px;">100 x 100</div>
<div style="margin-top: 10px; height:28px;">
    <a href="javascript:void(0);" id="btnCut" class="btn btn-primary" style="display:none;">确定剪切</a>
</div>

<div style="float:left; margin-top: -260px;margin-left: 140px;" id="upload_image">
    <div style="margin-bottom: 10px;">
        <span id="spanButtonPlaceholder_Logo"></span>
    </div>

    <div class="progress" style="display:none;">
        <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
            <span class="sr-only"></span>
        </div>
        <div style="float: left; position: absolute; font-size: 10px;">
            <span style="margin-left:100px">上传进度</span>  
        </div>
    </div>
    <div class="uploaded-image">
        <img src="/images/no-image.gif" id="target" style=" display:none;" />
    </div>
</div>


<link rel="stylesheet" href="/javascripts/jquery/Jcrop-master/css/jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript" src="/javascripts/jquery/Jcrop-master/js/jquery.Jcrop.min.js"></script>

<script type="text/javascript" src="/javascripts/swfupload/swfupload.js"></script>  
<script type="text/javascript" src="/javascripts/swfupload/handlers.logo.js"></script>  
<script type="text/javascript" src="/javascripts/swfupload/app.logo.js"></script>  

<script type="text/javascript" charset="utf-8">
var jcrop_api;

$(function(){
    //Jcrop({path:"/images/profile_o/安卓壁纸_风景5afad47cf6.jpg","width":1856, "height":984});
    $("#btnCut").click(function(){
        var cutWidth = $("#hid_cut_width").val();
        var cutHeight = $("#hid_cut_height").val();
        if ((cutHeight == "0" || cutHeight == "") || (cutWidth == "0" || cutWidth == "")) {
            //alert("You cropping do not conform to the requirement, please operate again！");
            jcrop_api.setSelect([0, 0, boundx, boundy]);
            return false;
        }
        var query = "path=" + encodeURIComponent($("#target").attr("src"));
            query += "&corrdinateX=" + $("#hid_cut_x").val();
            query += "&corrdinateY=" + $("#hid_cut_y").val();
            query += "&imageWidth=" + cutWidth;
            query += "&imageHeight=" + cutHeight;
            query += "&authenUserId=" + $("#hidAuthenUserId").val();
        $.get("/admin/upload-logo/cut?" + query, function(data){
            if(data.status != 1){
                art.tip.danger(data.message);                
            }
            art.tip.success("success");

            jcrop_api.destroy();
            $("#target, #btnCut").hide();

        });
    });
});

function uploadSuccess_Callback(file, serverData){
    console.log("serverData:", serverData)
    serverData = JSON.parse(serverData);
    if(serverData.status == 1){
        art.tip.success("upload success.");
        Jcrop(serverData.result);
    }
}

function Jcrop(serverData){
    var maxWidth = 560,
        maxHeight = 560,
        imgWidth = serverData.width,
        imgHeight = serverData.height;
    if(imgWidth <= maxWidth && imgHeight <= maxHeight){
        $("#target").css("width", imgWidth);
        $("#target").css("height", imgHeight);
    }
    else if (((imgWidth * 0.1) / (imgHeight * 0.1)) > maxWidth / maxHeight) {
        $("#target").css("width", maxWidth);
        $("#target").css("height", Math.round(imgHeight * maxWidth / imgWidth));
        
    }
    else {
        $("#target").css("width", Math.round(imgWidth * maxHeight / imgHeight));
        $("#target").css("height", maxHeight);            
    }
    $("#preview-pane .preview-container img, #preview-pane-big .preview-container-big img").attr("src", serverData.path);
    $("#target").attr("src", serverData.path).show();
    $("#btnCut").show();

    var boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),
        $pcnt_big = $('#preview-pane-big .preview-container-big'),
        $pimg_big = $('#preview-pane-big .preview-container-big img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();
        xsize_big = $pcnt_big.width(),
        ysize_big = $pcnt_big.height();

    $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        dragEdges: false,
        createHandles: ['nw', 'ne', 'se', 'sw'],
        aspectRatio: 1,
        allowSelect: false,
        setSelect:[0, 0, 100, 100]
    },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;

        jcrop_api.setSelect([0, 0, 100, 100]);

        // Move the preview into the jcrop container for css positioning
        //$preview.appendTo(jcrop_api.ui.holder);
    });

    function grid(c){
        if (parseInt(c.w) > 0)
        {
            var gw = Math.round(c.w/3),
                gh = Math.round(c.h/3);
            $(".jcrop-holder>div>div>div.jcrop-tracker").css({
                "background": "-webkit-linear-gradient(top, transparent "+(gw-1)+"px, lightgrey "+gh+"px),-webkit-linear-gradient(left, transparent "+(gw-1)+"px, lightgrey "+gh+"px)",
                "background-size": gw + "px " + gh + "px"
            });
        }
    } 

    function updatePreview(c)
    {
        if (parseInt(c.w) > 0)
        {
            grid(c);
            var rx = xsize / c.w;
            var ry = ysize / c.h;

            $pimg.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });

            rx = xsize_big / c.w;
            ry = ysize_big / c.h;

            $pimg_big.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });


            var imgObj = new Image();
            var width, height;
            imgObj.src = $("#target").attr("src");    
            width = imgObj.width;
            height = imgObj.height;
            var ScaleFactorW = width / boundx;
            var ScaleFactorH = height / boundy;
            $("#hid_cut_width").val(Math.round(ScaleFactorW * c.w));
            $("#hid_cut_height").val(Math.round(ScaleFactorH * c.h));
            $("#hid_cut_x").val(Math.round(c.x * ScaleFactorW));
            $("#hid_cut_y").val(Math.round(c.y * ScaleFactorH));
        }
    };
}
</script>

<div style="display:none;">
    <input type="text" id="hid_cut_width" />
    <input type="text" id="hid_cut_height" />
    <input type="text" id="hid_cut_x" />
    <input type="text" id="hid_cut_y" />
</div>